*{margin: 0;padding: 0;}
li{list-style-type: none;}
.init{z-index: 9999;position: fixed;top:0;left:0;height: 100%;width: 100%;background: #E6331C;}
.init .logo{margin:auto;width: 2rem;position: absolute;top:1.8rem;left:0;right: 0;}
.init .logo img{display: block;}
.init .box{margin:auto;width: 2.6rem;height: 1.5rem; position: relative;top:2.8rem;left:0;right: 0;}
.init .box .ball{opacity: 0.4;border-radius: 100%;position: absolute;}
.init .box .ball-1{animation-delay:0.2s;
-webkit-animation-delay:0.2s;background: #fff;height: 0.15rem;width: 0.15rem;top:0;left: 0.1rem;}
.init .box .ball-2{animation-delay:1.2s;
-webkit-animation-delay:1.2s;background: #faee00;height: 0.4rem;width: 0.4rem;top:0.4rem;left: 0.3rem;}
.init .box .ball-3{animation-delay:2s;
-webkit-animation-delay:0.5s;background: #e60012;height: 0.3rem;width: 0.3rem;top:0;left: 0.8rem;}
.init .box .ball-4{animation-delay:2.5s;
-webkit-animation-delay:0.25s;background: #e60012;height: 0.4rem;width: 0.4rem;top:0.3rem;left: 1.1rem;}
.init .box .ball-5{animation-delay:0.32s;
-webkit-animation-delay:0.32s;background: #faee00;height: 0.41rem;width: 0.41rem;top:0;left: 1.6rem;}
.init .box .ball-6{animation-delay:0.62s;
-webkit-animation-delay:0.62s;background: #ffffff;height: 0.22rem;width: 0.22rem;top:0;left: 2.2rem;}

.animated {
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes ball {
  0% {
    opacity: 0;
  }
 50% {
    opacity: 0.5;

 }
  100% {
    opacity: 0;
  }
}

@keyframes ball {
  0% {
    opacity: 0;
  }
 50% {
    opacity: 0.5;

 }
  100% {
    opacity: 0;
  }
}

.ball {
  -webkit-animation-name: ball;
  animation-name: ball;
}


.init-transition {
  transition: all 1s ease;
}

.init-enter, .init-leave {
  opacity: 0;
}










